<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .search {
            width: 100%;
            background-color: blue;
        }

        .search input {
            width: 95%;
            margin-left: 10px;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 10px;
            outline: none;
            background-color: #f5f5f5;
            border-style: none;
            border-radius: 50px;
        }

        .bg {
            width: 100%;
            height: 80px;
        }

        .bg div {
            width: 90%;
            height: 80px;
            background: blue;
            margin: auto;
            margin-top: 10px;
            border-radius: 10px;
        }

        .xh h4 {
            margin: 10px;
        }

        .xh .px {
            display: inline-block;
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;

        }

        .xh .yh {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .xh .yh span {
            display: inline-block;
            background-color: #f5f5f5;
            padding: 5px;
            font-size: 14px;
        }

        .tp {
            float: left;
        }

        img {
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .dp {
            margin: 10px;
            height: 140px;
        }

        .dp h3 {
            padding-top: 10px;
        }

        .db {
            position: fixed;
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #f5f5f5;

        }
    </style>
</head>

<body>
    <div id="app">
        <div class="search">
            <input type="text" placeholder="输入商家、商家名称">
        </div>
        <div class="bg">
            <div></div>
        </div>
        <div class="xh">
            <h4>猜你喜欢</h4>
            <div class="px">
                <div v-on:click="clickLike(index)" :style="{color: currlike==index?'blue':''}"
                    v-for="(item,index) in likeArr">
                    <span>{{item}}</span>
                </div>
            </div>
            <div class="yh">
                <span v-for="(item,index) in buyArr">{{item}}</span>
            </div>
        </div>
        <div v-for="(item,index) in dpArr">
            <div class="tp"> <img :src="item.pic" alt=""></div>
            <div class="dp">
                <h3>{{item.name}}</h3>
                <p><span>{{item.pf}} 月售 {{item.xs}}</span> </p>
                <p>起送￥{{item.qs}}远距离配送{{item.ps}}{{item.time}}分钟{{item.jl}}km</p>
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="db">
            <div v-on:click="clickBtn(index)" :style="{color: currIndex==index?'red':''}" v-for="(item,index) in dbArr">
                <span>{{item}}</span>
            </div>
        </div>

    </div>



    <script src="./vue-2.5.21.js"></script>
    <script src="./首页.js"></script>

</body>

</html>